<template>
  <view>
    <LPainter
      ref="painterRef"
      css="width: 720rpx;"
      custom-style="position: fixed; left: -2000rpx"
      isCanvasToTempFilePath
      @success="posterSuccess"
    >
      <LPainterImage
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/registration-voucher-poster.png"
        css=" width: 100%;height: 100%"
      ></LPainterImage>
      <LPainterView
        :css="{
          width: '100%',
          height: '100%',
          position: 'absolute',
          left: 0,
          top: 0,
          borderRadius: '48rpx',
        }"
      >
        <LPainterView
          :css="{
            padding: '48rpx',
          }"
        >
          <LPainterImage
            :src="avatar || EmptyAvatar"
            :css="{
              width: '96rpx',
              height: '96rpx',
              borderRadius: '50%',
            }"
          ></LPainterImage>
          <LPainterView
            :css="{
              display: 'inline-block',
              marginLeft: '24rpx',
            }"
          >
            <LPainterText
              :css="{
                display: 'block',
                color: '#333',
                fontSize: '36rpx',
                marginBottom: '8rpx',
              }"
              :text="personName"
            ></LPainterText>
            <LPainterText
              :css="{
                display: 'block',
                color: '#333',
                fontSize: '28rpx',
              }"
              :text="personTel"
            ></LPainterText>
          </LPainterView>
        </LPainterView>
        <LPainterView :css="{ padding: '48rpx', paddingTop: 0 }">
          <LPainterText
            :css="{
              display: 'block',
              color: '#333',
              fontSize: '32rpx',
              marginBottom: '32rpx',
              lineClamp: 2,
              textAlign: 'center',
            }"
            :text="activityTitle"
          />
          <LPainterText
            :css="{
              display: 'block',
              color: '#333',
              fontSize: '48rpx',
              marginBottom: '32rpx',
              lineClamp: 1,
              textAlign: 'center',
            }"
            :text="ticketName"
          />
          <LPainterImage
            :src="consumeNoUrl"
            :css="{
              width: '220rpx',
              height: '220rpx',
              margin: 'auto',
              marginBottom: '16rpx',
            }"
          ></LPainterImage>
          <LPainterText
            :css="{
              display: 'block',
              color: '#333',
              fontSize: '32rpx',
              marginBottom: '32rpx',
              lineClamp: 2,
              textAlign: 'center',
            }"
            :text="consumeNo"
          />
          <LPainterText
            :css="{
              display: 'block',
              color: '#969799',
              fontSize: '28rpx',
              textAlign: 'center',
            }"
            text="参加活动时，"
          />
          <LPainterText
            :css="{
              display: 'block',
              color: '#969799',
              fontSize: '28rpx',
              textAlign: 'center',
            }"
            text="使用凭证码参与签到核验"
          />
        </LPainterView>
      </LPainterView>
    </LPainter>
  </view>
</template>

<script setup lang="ts">
  import LPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue';
  import LPainterImage from '@/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue';
  import LPainterView from '@/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue';
  import LPainterText from '@/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue';

  import { propTypes } from '@/utils/propTypes';
  import { ref } from 'vue';

  const EmptyAvatar =
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/emptyIcon/empty-avatar-2.png';

  defineProps({
    avatar: propTypes.string,
    personName: propTypes.string,
    personTel: propTypes.string,
    activityTitle: propTypes.string,
    ticketName: propTypes.string,
    consumeNo: propTypes.string,
    consumeNoUrl: propTypes.string,
  });

  const emits = defineEmits(['success']);
  /** 分享图生成成功回调 */
  function posterSuccess(url: string) {
    emits('success', url);
  }
</script>

<style scoped></style>
